<template>
    <div class="backIndexPage" ref="backIndexContainer">
        <div class="backIndex-content">
            <div class="logo">
                <img src="../../../images/logo.png" alt="">
            </div>
            <!-- <div class="listContent" v-show="showFlag">
                <div class="topBox">
                    <div class="search">
                        <input type="text" name="" id="" placeholder="输入作品名称搜索">
                        <i class="el-icon-search"></i>
                    </div>
                    <router-link to="/addMovement">
                        <div class="oprate active">
                            <i class="el-icon-plus"></i>
                            <span>新增</span>
                        </div>
                    </router-link> 
                </div>
                <div class="list">
                    <div class="worksList" v-for="index in length" :key="index">
                        <div class="icon">
                            <span>作品名称</span>
                        </div>
                        <div class="imgBox">
                            <img src="../../../images/img1.png" alt="">
                        </div>
                    </div>
                </div>
            </div> -->
            <div class="routerView">
                <router-view></router-view>
            </div>
            <div class="addContent" v-show="!showFlag">
                <div class="topBox">
                    <!-- 输入输出运动 -->
                    <div class="left">
                        <div class="leftContent">
                            <!--  -->
                            <div class="topContent">
                                <div class="icon">
                                    <span>输入运动</span>
                                </div>
                                <div class="listDown">
                                    <ul>
                                        <li>
                                            <i></i>
                                            <span>单 向 转 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <i></i>
                                            <span>往 复 移 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <i></i>
                                            <span>导 向 移 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                        </li>
                                        
                                    </ul>
                                </div>
                                
                            </div>
                            <div class="bottomContent">
                                <div class="icon">
                                    <span>输出运动</span>
                                </div>
                                <div class="listDown">
                                    <ul>
                                        <li>
                                            <i></i>
                                            <span>转 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                            
                                        </li>
                                        <li>
                                            <i></i>
                                            <span>移 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                        </li>
                                        <li>
                                            <i></i>
                                            <span>导 向 移 动</span>
                                            <div class="select">
                                                <select>
                                                    <option>恒速电动机</option>
                                                    <option>恒速电动机2</option>
                                                    <option>恒速电动机3</option>
                                                    <option>恒速电动机4</option>
                                                </select>
                                            </div>
                                        </li>
                                        
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 方案图 -->
                    <div class="right">
                        <div class="rightContent">
                            <div class="icon">
                                <span>生成方案</span>
                            </div>
                            <div class="imgBox">
                                <img src="../../../images/img2.png" alt="">
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <span class="text">
                        <i></i>
                        机构全拓扑信息
                    </span>
                    <div class="btn">
                        <span class="v-btn active" style="margin-right:40px;">重置</span>
                        <span class="v-btn">生成</span>
                    </div>
                    
                </div>
            </div>

            <!-- <div class="inputDiv">
               <router-link to="/backIndex"><input class="active" type="button" value="新增"></router-link> 
            </div> -->
            
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            showFlag:true,
            length:8,
            clientHeight:"",
            dialogVisible:false,
            datalist:[
                {img_url:require("../../../images/icon2.png"),id:1},
                {img_url:require("../../../images/icon2.png"),id:2},
                {img_url:require("../../../images/icon2.png"),id:3}, 
                {img_url:require("../../../images/icon2.png"),id:4}, 
                {img_url:require("../../../images/icon2.png"),id:5},
                {img_url:require("../../../images/icon2.png"),id:6}, 
                {img_url:require("../../../images/icon2.png"),id:7}, 
                {img_url:require("../../../images/icon2.png"),id:8}
            ]
        }
    },
    mounted(){
        // 获取浏览器可视区域高度
        this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
        window.onresize = function temp() {
            this.clientHeight = `${document.documentElement.clientHeight}`;
        };
    },
    methods:{
        changeFixed(clientHeight){                        //动态修改样式
            // this.$refs.backIndexContainer.style.height = (clientHeight-70)+'px';
        },
        glossaryDetail(index){
            this.dialogVisible = true
            console.log(index)
        }
    },
    watch:{
        clientHeight: function () {
            this.changeFixed(this.clientHeight)
        },
    }
}
</script>

<style lang="scss" scoped>
.backIndexPage{
    position: relative;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    overflow-y: hidden;
    .backIndex-content{
        position: relative;
        width:66%;
        height:100%;
        margin:20px auto;
        text-align: center;
        .logo{
            width:35%;
            height:18%;
            margin:20px auto;
            img{
                width:100%;
                height: 100%;
            }
        }
        .routerView{
            height: 75%;
            overflow-y: hidden;
        }
        
        .inputDiv{
            text-align: right;
            input{
                width: 150px;
                height:40px;
                // line-height: 36px;
                font-size: 16px;
                font-weight: bold;
                // padding:0 20px;
                margin-left: 20px;
                color: #76383B;
                border: 2px solid #76383B;
                background: transparent;
                border-radius: 20px;
                text-indent: 0em;
                &.active{
                    font-weight: normal;
                    color: #fff;
                    background: #76383B;
                }
            }
        }
        .addContent{
            height: 75%;
            .topBox{
                display: flex;
                height: 85%;
                justify-content: space-between;
            }
            .bottom{
                display: flex;
                justify-content: space-between;
                .text{
                    display: flex;
                    margin-left: 8%;
                    justify-content: center;
                    align-items: center;
                    color: #76383B;
                    font-weight: bold;
                    i{
                        display: inline-block;
                        width:20px;
                        height: 20px;
                        margin-right:15px;
                        background: url('../../../images/icon4.png') center/cover no-repeat;
                    }
                }
                .btn{
                    margin-right: 100px;
                }
            }
            .left{
                display: flex;
                width: 50%;
                justify-content: center;
                align-items: center;
                .leftContent{
                    width: 80%;
                    height: 90%;
                    background: #fff;
                    border: 2px solid #76383B;
                    border-radius: 15px;
                    .topContent{
                        display: flex;
                        position:relative;
                        height: 50%;
                        justify-content: center;
                        align-items: center;
                    }
                    .bottomContent{
                        display: flex;
                        position:relative;
                        height: 50%;
                        justify-content: center;
                        align-items: center;
                    }
                    .icon{
                        position: absolute;
                        left:-8%;
                        top:-8%;
                        width: 53%;
                        height: 20%;
                        background: url("../../../images/icon.png") center/cover no-repeat;
                        span{
                            color: #fff;
                            font-size: 18px;
                            line-height: 50px;
                        }
                    }
                    .listDown{
                        width:90%;
                        height: 75%;
                        // position: relative;
                        // margin-top:30px;
                        // background: #ccc;
                        ul{padding:0}
                        ul>li{
                            display: flex;
                            align-items: center;
                            width: 100%;
                            line-height: 50px;
                            i{
                                display: inline-block;
                                width:20px;
                                height: 20px;
                                background: url('../../../images/icon4.png') center/cover no-repeat;
                            }
                            span{
                                width: 100px;
                                font-family: 'Microsoft Yahei';
                                font-size: 18px;
                                font-weight: 400;
                                color:#7A3C40; 
                                text-align: left;
                                // text-align-last: center;
                                padding: 0 5px;
                                
                            }
                            div.select{
                                position: relative;
                                width:50%;
                                select{
                                    width:100%;
                                    height: 30px;
                                    line-height: 30px;
                                    // margin-left:15px;
                                    color: #BDA5AB;
                                    text-align: center;
                                    text-align-last: center;
                                    font-size: 16px;
                                    border:2px solid #DBA6AA;
                                    outline: none;
                                    //隐藏select的下拉图标
                                    appearance: none;
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    // background: url("../../../images/arrowdown.png") no-repeat scroll right center transparent;
                                    
                                    
                                }
                                option::-ms-expand{ display: none; }
                                option{
                                    -moz-appearance:none; /* Firefox */
                                    -webkit-appearance:none; /* Safari 和 Chrome */
                                    appearance:none;
                                }
                                option:hover{
                                    color:#fff;
                                    background-color:#DBA6AA;
                                }
                                &:after{
                                    content: "";
                                    width: 30px;
                                    height: 30px;
                                    background: url("../../../images/arrowdown.png") no-repeat center/cover;
                                    //通过定位将图标放在合适的位置
                                    position: absolute;
                                    right: 0px;
                                    top: 9px;
                                    //给自定义的图标实现点击下来功能
                                    pointer-events: none;
                                }
                            }
                            
                        }
                    }
                }
            }
            .right{
                display: flex;
                width: 50%;
                justify-content: center;
                align-items: center;
                .rightContent{
                    display: flex;
                    position: relative;
                    width: 80%;
                    height: 90%;
                    background: #fff;
                    border: 2px solid #76383B;
                    border-radius: 15px;
                    justify-content: center;
                    align-items: center;
                    .icon{
                        position: absolute;
                        left:-8%;
                        top:-4%;
                        width: 52%;
                        height: 10%;
                        background: url("../../../images/icon.png") center/cover no-repeat;
                        span{
                            color: #fff;
                            font-size: 18px;
                            line-height: 50px;
                        }
                    }
                    .imgBox{
                        width: 80%;
                        height: 80%;
                        background: #FAFAFA;
                        // margin-top:20px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

        }
    }
}
</style>